<template>
  <div class="merak-upload">
    <el-upload
      drag
      :action="props.action"
      :name="props.name"
      :limit="props.limit"
      :multiple="props.multiple"
      :accept="props.accept"
      :disabled="props.disabled"
      :file-list="props.fileList"
      :http-request="props.request"
      :before-upload="handleBeforeUpload"
      :before-remove="handleBeforeRemove"
      @exceed="handleExceed"
      @error="handleError"
    >
      <template #default>
        <MerakIcon size="50" color="#ccc">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <path
              d="M11 20H6.5Q4.22 20 2.61 18.43 1 16.85 1 14.58 1 12.63 2.17 11.1 3.35 9.57 5.25 9.15 5.88 6.85 7.75 5.43 9.63 4 12 4 14.93 4 16.96 6.04 19 8.07 19 11 20.73 11.2 21.86 12.5 23 13.78 23 15.5 23 17.38 21.69 18.69 20.38 20 18.5 20H13V12.85L14.6 14.4L16 13L12 9L8 13L9.4 14.4L11 12.85Z"
            />
          </svg>
        </MerakIcon>
        <div class="merak-upload-text">
          {{ $t("staff_list.upload_drag_here") }} <span>{{ $t("staff_list.upload_by_click") }}</span>
        </div>
      </template>
    </el-upload>
  </div>
</template>

<script setup lang="ts">
import type { MerakUploadProps } from "./index";

import type { UploadInstance } from "element-plus";

import { getCurrentInstance } from "vue";

import { ElUpload, ElMessage } from "element-plus";

import { confirmWarningMsg } from "@/utils/messageUtils";

import MerakIcon from "@/components/MerakIcon/index.vue";

const { proxy } = getCurrentInstance()!;

const props = withDefaults(defineProps<MerakUploadProps>(), {
  action: "#",
  name: "file",
  limit: 5,
  multiple: true
});

const handleBeforeUpload: UploadInstance["beforeUpload"] = file => {
  if (/\/|\\|\,|\<|\>/.test(file.name)) {
    ElMessage.warning(proxy?.$t("staff_list.upload_name_valid"));
    return false;
  }
};

const handleBeforeRemove: UploadInstance["beforeRemove"] = uploadFile => {
  return new Promise(resolve => {
    confirmWarningMsg({
      msg: `${proxy?.$t("staff_list.upload_delete_wraning")} ${uploadFile.name}?`,
      callback: async (type: string) => {
        if (type === "confirm") {
          // @ts-ignore
          if (!!uploadFile.response && !!uploadFile.response.user_file_id) {
            // @ts-ignore
            await props.delete?.(uploadFile.response.user_file_id);
          }
          resolve(true);
        }
        resolve(false);
      }
    });
  });
};

const handleExceed: UploadInstance["onExceed"] = (files, uploadFiles) => {
  const limit = props.limit;
  if (!limit) return;
  if (files.length + uploadFiles.length > limit) {
    ElMessage.warning(`${proxy?.$t("staff_list.upload_limit_message")} ${limit - uploadFiles.length}`);
  }
};

const handleError: UploadInstance["onError"] = error => {
  ElMessage.error(error.message);
};
</script>

<style lang="scss">
.merak-upload {
  font-size: var(--merak-text-size);
  &-text {
    color: var(--el-text-color-secondary);
    & > span {
      color: var(--el-color-primary);
    }
  }
  .el-upload-list__item-info {
    margin-left: 12px;
  }
  .el-icon--close {
    left: 0;
  }
}
</style>
